<template>
    <div>
        <ul>
            <li v-for="(item,index) in arr" :key="index">
                {{ item }}
            </li>
        </ul>
        <button @click="revBtn">数组翻转</button>
        <button @click="sliceBtn">截取前3个</button>
        <button @click="updateBtn">更新第一个元素值</button>
        <button @click="addBtn">新增一个</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            arr: [5, 3, 9, 2, 1]
        }
    },
    methods: {
        addBtn() {
            //能让原数组改变的方法，能让v-for更新
            this.arr.push(Math.round(Math.random() * 10))
        },
        revBtn() {
            // 1. 数组翻转可以让v-for更新
            this.arr.reverse()
        },
        sliceBtn() {
            // 2. 数组slice方法不会造成v-for更新
            // this.arr.slice(0, 3)
            // 解决v-for更新 - 覆盖原始数组
            this.arr = this.arr.slice(0, 3)
        },
        updateBtn() {
            // 3. 更新某个值的时候, v-for是监测不到的
            // this.arr[0] = 999
            // 解决-this.$set()
            // 参数1: 更新目标结构
            // 参数2: 更新位置
            // 参数3: 更新值
            this.$set(this.arr, 0, 999)
        }
    }
}
</script>

<style>

</style>
